<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote style="font-size: 14px">
          欢迎使用 <b>Vue 3 + Vite + Element Plus</b> 构建的项目模板！
        </blockquote>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div ref="chartDom" style="width: 100%; height: 400px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="dynamicSortBarChart" style="width: 100%; height: 400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import {ref, onMounted, onUnmounted, nextTick} from 'vue';
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
const dynamicSortBarChart = ref(null)
let chartDomInstance = null;
let dynamicSortBarChartInstance = null;

const dynamicSortBarChartOption = ref(null)

//设定动态柱状图的最大值
const maxValue = 10000
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）

onMounted(async () => {
  await nextTick() // 确保DOM已经渲染完成
  chartDomInstance = echarts.init(chartDom.value);
  const chartDomOption = {
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    title: {
      text: 'ECharts 示例图表'
    },
    animation: "auto",
    animationDuration: 1000,
    animationDurationUpdate: 500,
    animationEasing: "cubicOut",
    animationEasingUpdate: "cubicOut",
    tooltip: {},
    xAxis: {
      data: ["类别1", "类别2", "类别3", "类别4", "类别5"]
    },
    yAxis: {},
    series: [{
      name: '数据系列',
      type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
      data: [120, 200, 150, 80, 70]
    }]
  };
  chartDomInstance.setOption(chartDomOption);

  // 动态柱状图
  var data = [];
  for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 200));
  }
  dynamicSortBarChartInstance = echarts.init(dynamicSortBarChart.value);
  dynamicSortBarChartOption.value = {
    title: {
      text: '动态排序柱状图'
    },
    xAxis: {
      max: 'dataMax'
    },
    yAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E'],
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      max: 2 // only the largest 3 bars will be displayed
    },
    series: [
      {
        realtimeSort: true,
        name: 'X',
        type: 'bar',
        data: data,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true
        }
      }
    ],
    legend: {
      show: true
    },
    animationDuration: 3000,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  };
  dynamicSortBarChartInstance.setOption(dynamicSortBarChartOption.value);
})

// 销毁ECharts实例
onUnmounted(() => {
  if (chartDomInstance != null && chartDomInstance.dispose) {
    chartDomInstance.dispose();
  }
  if (dynamicSortBarChartInstance != null && dynamicSortBarChartInstance.dispose) {
    dynamicSortBarChartInstance.dispose();
  }
});

const updateDynamicData = () => {
  var data = dynamicSortBarChartOption.value.series[0].data;
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000);
      if (data[i] > maxValue) {
        data[i] = Math.round(data[i] / (Math.random() * 200));
      }
    } else {
      data[i] += Math.round(Math.random() * 200);
      if (data[i] > maxValue) {
        data[i] = Math.round(data[i] / (Math.random() * 200));
      }
    }
  }
  dynamicSortBarChartInstance.setOption(dynamicSortBarChartOption.value);
}

setInterval(() => {
  updateDynamicData();
}, 1000)
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

